<%--
  Created by IntelliJ IDEA.
  User: fire'ge
  Date: 2022/5/8
  Time: 20:08
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" %>
<html>
<head>
    <title>注册页面</title>
    <link rel="stylesheet" type="text/css" href="/TakeawaySystem/css/register.css">
</head>
<body><form action="../user/addUser" method="post" id="reg-from">
    <table id="table_container">
        <th id="th_size" colspan="3">欢迎注册</th>
        <tr>
            <td>
                <li><label>注册身份</label>
                    <select name="id" >
                        <option value=0 <c:if test="${id==0}"></c:if>>用户</option>
                        <option value=1 <c:if test="${id==1}"></c:if>>商家</option>
                    </select>

                </li>
            </td>
        </tr>

        <tr>
            <td>用户名</td>
            <td><input type="text" name="username" id="username">
                <br>
                <span id="username_err" class="err_meg" style="display: none" >此用户名不符合格式</span>
            </td>


        </tr>
        <tr>
            <td>密码</td>
            <td><input type="password" name="password" id="password"  >
                <br>
                <span id="pwd_err" class="err_meg" style="display: none">此密码不符合格式</span></td>

        </tr>

        <tr>
            <td>再次输入密码</td>
            <td><input type="password" name="password2" id="password2"  >
                <br>
                <span id="pwd2_err" class="err_meg" style="display: none">两次输入密码不一样</span></td>

        </tr>

        <tr>
            <td colspan="2" > <input type="submit" value="注    册" class="button"></td>
        </tr>
    </table>
</form>
<script>
    var usernameInput = document.getElementById("username");
    usernameInput.onblur = checkUsername;
    function checkUsername(){
        var username = usernameInput.value;
        var reg = /^.{6,20}$/;
        var flag = reg.test(username);
        var une = document.getElementById("username_err");
        if (flag){
            une.style.display= 'none';
        }
        else {
            une.style.display='';
        }
        return flag;
    }

    var pwdInput = document.getElementById("password");
    pwdInput.onblur = checkPwd;
    function checkPwd(){
        var pwd = pwdInput.value;
        var reg = /^\w{9,12}$/;
        var flag = reg.test(pwd);
        var une = document.getElementById("pwd_err");
        if (flag){
            une.style.display= 'none';
        }
        else {
            une.style.display='';
        }
        return flag;

    }
    var pwd2Input = document.getElementById("password2");
    pwd2Input.onblur = checkPwd2;
    function checkPwd2(){
        var pwd = pwdInput.value;
        var pwd2 = pwd2Input.value;
        var flag = pwd2 == pwd;
        var une2 = document.getElementById("pwd2_err");
        if (flag){
            une2.style.display= 'none';
        }
        else {
            une2.style.display='';
        }
        return flag;

    }

    var telInput = document.getElementById("tel");
    telInput.onblur = checktel;
    function checktel(){
        var tel = telInput.value;
        var reg = /^\d{11}$/;
        var flag = reg.test(tel);
        var une = document.getElementById("tel_err");
        if (flag){
            une.style.display= 'none';
        }
        else {
            une.style.display='';
        }
        return flag;

    }
    var reg_from = document.getElementById("reg-from");
    reg_from.onsubmit = checkSubmit;
    var submit_rgs = document.getElementById("submit");
    submit_rgs.onmouseup = function (){
        submit_rgs.style.cursor = "pointer";
    }
    function checkSubmit(){
        var flag = checkUsername()&&checkPwd() && checktel() && checkPwd2();
        return flag;
    }

</script>
</body>
</html>
